import React, { PureComponent } from 'react'
import { Provider } from 'react-redux'
import { Tabs } from 'antd'
import './VdoPlay.scss'
import request from '../../api/api'
import Comment from '../../components/VdoPlay/Comment/Comment'
import Intr from '../../components/VdoPlay/Intr/Intr'
import store from '../../redux/store'



const { TabPane } = Tabs
export default class VdoPlay extends PureComponent {
    state = {
        vsrc: '',
        movieId: '',
        intrObj: {},
        commentList: [],
        zan: 0
    }
    // handleChange = (e) => {
    //      console.log(e);
    // }
    back = () => {
        this.props.history.goBack()
    }
    getIntr = (movieId) => {
        let { zan } = this.state
        request({
            url: `/api/maoyan/movie/detail?movieId=${movieId}`,
            method: 'get'
        }).then(res => {
            res.comments.hotComments.forEach((element) => {
                zan += element.upCount*1
                element.color = this.color
            });
            let obj = {
                id: res.movie.id,
                name : res.movie.videoName,
                time : res.movie.rt,
                isrc : res.movie.img,
                ter : res.movie.pubDesc,
                title : res.movie.nm,
                leixing : res.movie.cat,
                wish : res.movie.wish,
                zanCount : zan,
                msg : res.comments.hotComments.length
            }
            this.setState({
                intrObj: obj,
                vsrc: res.movie.videourl,
                commentList: res.comments.hotComments,
                zan: zan
            })
        })
    }


    componentDidMount() {
        // console.log(this.props);
        let { movieId } = this.props.match.params
        this.getIntr(movieId)
    }
    render() {
        let { movieId } = this.props.match.params
        let { vsrc, intrObj, commentList, zan } = this.state
        return (
            <>
                <div id="box-vdopla">
                    <header className="h">
                        <svg onClick={this.back}
                            t="1640051219559"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="3717"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z"
                                p-id="3718"
                                fill="#ffffff"
                            ></path>
                        </svg>
                        <p>电影</p>
                        <svg
                            t="1640051277058"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="4583"
                            width="20"
                            height="20"
                        >
                            <path
                                d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z"
                                p-id="4584"
                                fill="#ffffff"
                            ></path>
                            <path
                                d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z"
                                p-id="4585"
                                fill="#ffffff"
                            ></path>
                            <path
                                d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z"
                                p-id="4586"
                                fill="#ffffff"
                            ></path>
                            <path
                                d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z"
                                p-id="4587"
                                fill="#ffffff"
                            ></path>
                        </svg>
                    </header>
                    <div>
                        <video src={vsrc} controls autoPlay className='vdo'></video>
                        <div className="contain-vdo">
                            <div>
                                <Tabs defaultActiveKey="1" onChange={this.handleChange} centered>
                                    <TabPane tab="简介" key="1">
                                        <div>
                                            <Intr {...intrObj} />
                                        </div>
                                    </TabPane>
                                    <TabPane tab="评论" key="2">
                                        <div>
                                            <Provider store={store}>
                                                <Comment commentList={commentList} zan={zan} intrObj={intrObj} movieId={movieId}/>
                                            </Provider>
                                        </div>
                                    </TabPane>
                                </Tabs>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}
